<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <script type="text/javascript" src="../internal.js"></script>
    <style type="text/css">
      .section {
        text-align: center;
        margin-top: 10px;
      }
      .section input {
        margin-left: 5px;
        width: 70px;
      }
    </style>
  </head>
  <body>
    <div class="section">
      <span><var id="lang_tdBkColor"></var></span>
      <input type="text" id="J_tone" />
    </div>
    <script type="text/javascript">
      var tone = $G("J_tone"),
        colorPiker = new UE.ui.ColorPicker({
          editor: editor
        }),
        colorPop = new UE.ui.Popup({
          editor: editor,
          content: colorPiker
        });
      domUtils.on(tone, "click", function() {
        colorPop.showAnchor(tone);
      });
      domUtils.on(document, "mousedown", function() {
        colorPop.hide();
      });
      colorPiker.addListener("pickcolor", function() {
        tone.value = arguments[1];
        colorPop.hide();
      });
      colorPiker.addListener("picknocolor", function() {
        tone.value = "";
        colorPop.hide();
      });
      dialog.onok = function() {
        editor.execCommand("edittd", tone.value);
      };

      var start = editor.selection.getStart(),
        cell = start && domUtils.findParentByTagName(start, ["td", "th"], true);
      if (cell) {
        var color = domUtils.getComputedStyle(cell, "background-color");
        if (/^#/.test(color)) {
          tone.value = color;
        }
      }
    </script>
  </body>
</html>
